<template>
  <div id="bookclass">
    <toptitle>
      <span slot="center">约课记录</span>
    </toptitle>
    <van-tabs line-width="20px" title-active-color="#eb6100">
      <van-tab title="待上课"></van-tab>
      <van-tab title="已上课"></van-tab>
      <van-tab title="已取消"></van-tab>
    </van-tabs>
    <div class="img-box">
      <img src="../assets/img/yue.762255ea.png" alt="">
    </div>
    <!-- <div class="btn"></div> -->
    <button class="btn">立即约课</button>
  </div>
</template>

<script>
import  Vue from 'vue';
import { Tab, Tabs } from 'vant';
import 'vant/lib/tab/style'
import 'vant/lib/tabs/style'

// const app = createApp();
Vue.use(Tab);
Vue.use(Tabs);
import Toptitle from '../components/common/toptitle/Toptitle.vue'
export default {
  components: { Toptitle },
  name:"BookClass"
}
</script>

<style scoped>
  .img-box{
    height: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img{
    width: 250px;
    height: 140px;
  }
  .btn{
    width: 90px;
    height: 35px;
    background: #eb6100;
    color: white;
    border: none;
    outline: none;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>